<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content="LUI，轻量级移动端UI组件库"/>
    <meta name="description" content="LUI，基于html,css,js原生能力驱动，轻量级移动端UI组件库。LUI不是框架，她只是为你的应用提供基础的UI组合以及一些常用方法，架构层面随你自行组织" />
    <link rel="icon" href="images/icon/lui.png">
    <link rel="stylesheet" type="text/css" href="css/lui.css" />

  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <div class="ui_page_wrap">
        <header class="ui_page_hd"><a href="javascript:goBack();" class="ui_back"></a>卡片</header>
        <div class="ui_page_bd">
            <!-- ///[htmldemo] -->
            <div class="ui_card">
                <header class="ui_card_hd">
                    卡头
                </header>
                <div class="ui_card_bd">
                    一个完整的卡片，包含卡头，卡主体内容，卡尾
                </div>
                <footer class="ui_card_ft">
                    卡尾
                </footer>
            </div>              
            <div class="ui_card">
                <header class="ui_card_hd" data-role="toggle" onclick="toggleCard(this)">
                    <span>卡头</span>
                    <i class="ui_arrow_right"></i>
                </header>
                <div class="ui_card_bd">
                    <section class="ui_card_inner">
                        可折叠卡片
                    </section>                    
                </div>
            </div>    
            <div class="ui_card">
                <header class="ui_card_hd">
                    <span>卡头</span>
                </header>
                <div class="ui_card_bd">
                    带链接的卡片
                </div>
                <a href="about.html" class="ui_card_ft">
                    <span>卡尾</span>
                    <i class="ui_arrow_right"></i>
                </a>
            </div>
            <!-- ///[htmldemo] -->
        </div>
    </div>
    <script type="text/javascript">
        ///[jsdemo]
        /*显示折叠*/
          function toggleCard(_this){
            var target = _this.dataset.role;
            if(target){
                if(_this.className.indexOf('active') > -1){
                    _this.classList.remove('active')
                }else{
                    _this.classList.add('active')
                }
            }
          }
        ///[jsdemo]
    </script>
</body>
</html>